/* 页面头部区域 */
.header {
    height: .69rem;
    border-bottom: 1px solid #109980;
    display: flex;
    color: #fff;
    padding: 0.2rem;

    .nav {
        flex: 1;
        display: flex;

        // 导航栏
        ul {
            li {
                float: left;
                margin: 0rem 0.1rem;
                width: 0.94rem;
                height: 0.35rem;
                border-radius: 0.05rem;
                line-height: 0.35rem;
                text-align: center;
                font-size: 0.17rem;
                background-color: #4d4d4d;

                &:hover,
                &.on {
                    cursor: pointer;
                    background-color: #109980;
                }

                a {
                    color: #fff;
                }
            }
        }
    }

    .fun-block {
        width: 4.9rem;
        display: flex;

        // 右侧功能菜单栏
        .date {
            flex: 3;

            div:first-child {
                font-size: .2rem;
                color: #109980;
            }

            div:last-child {
                font-size: .13rem;
                color: #fff
            }
        }

        .tq {
            flex: 2;
            text-align: center;

            .iconfont {
                float: left;
                font-size: .4rem;
                color: #fff;
            }

            .number {
                float: left;
                text-align: center;

                span {
                    display: block;
                }
            }
        }

        .recovery,
        .configure,
        .quit {
            flex: 1;
            text-align: center;

            .iconfont {
                font-size: .2rem;
            }
        }
    }

    // 大标题样式
    .title {
        width: 5rem;
        font-size: .31rem;

    }
}

/* 页面内容区域 */
.main {
    display: flex;

    .column {
        flex: 1;
        margin: .1rem;

        .panel {
            height: 2.48rem;
            border: 1px solid #109980;
            margin-bottom: .1rem;
            position: relative;
            padding: .1rem;

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: .1rem;
                height: .1rem;
                border-left: 1px solid #fff;
                border-top: 1px solid #fff;
            }

            &::after {
                position: absolute;
                top: 0;
                right: 0;
                content: "";
                width: .1rem;
                height: .1rem;
                border-right: 1px solid #fff;
                border-top: 1px solid #fff;
            }

            .panel-footer {
                position: absolute;
                bottom: 0;
                left: 0;
                border: none;
                width: 100%;

                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: .1rem;
                    height: .1rem;
                    border-bottom: 1px solid #fff;
                    border-left: 1px solid #fff;
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: .1rem;
                    height: .1rem;
                    border-bottom: 1px solid #fff;
                    border-right: 1px solid #fff;
                }
            }

            h3 {
                padding-bottom: 10px;
            }

            .info-list {
                height: 1.88rem;
                overflow: hidden;
            }

        }
    }
}

/* 通过CSS3动画滚动marquee */
.marquee-view {
    .marquee {
        animation: move 15s linear infinite;

        /* 鼠标经过marquee 就停止动画 */
        &:hover {
            animation-play-state: paused;
        }
    }
}

@keyframes move {
    0% {}

    100% {
        transform: translateY(-50%);
    }
}